<template>
  <div class="coupon">
    <van-nav-bar title="优惠券" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          placement="bottom-end"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference
            ><van-icon name="ellipsis" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <tabs :name="['全部', '新到优先', '快过期优先']" />
    <coupons :key="tr" urls="/coupons" />
    <van-dialog
      v-model="show"
      title="标题"
      show-cancel-button
      @confirm="addCoupon"
    >
      <van-field v-model="text" placeholder="请输入兑换码" />
    </van-dialog>
    <rec />
  </div>
</template>

<script>
import tabs from "./components/coupon/tabs.vue";
import coupons from "./components/coupon/coupons.vue";
import rec from "./components/Recommend.vue";
import axios from "axios";
export default {
  name: "coupon",
  data() {
    return {
      tr: "",
      text: "",
      show: false,
      showPopover: false,
      actions: [
        { id: 0, text: "历史记录", icon: "clock-o" },
        { id: 1, text: "兑换", icon: "add-o" },
        { id: 2, text: "帮助说明", icon: "question-o" },
      ],
    };
  },
  components: {
    tabs,
    coupons,
    rec,
  },
  methods: {
    addCoupon() {
      if (this.text == "") {
        this.$notify({ type: "warning", message: "请输入兑换码" });
        return;
      }
      axios({
        method: "post",
        url: "/coupons",
        data: {
          available: 1,
          condition: "无使用门槛",
          reason:
            "仅限购买耳目达C20，不包含新人专享，有品秒杀，限量抢和其他特殊商品，具体以结算信息页为准",
          value: 500,
          name: "电视专享",
          startAt: 1489104000,
          endAt: 1514592010,
          endAts: "2022.01.29/23:59",
          valueDesc: "1.5",
          unitDesc: "元",
        },
      }).then((res) => {
        if (res.data != null) {
          this.$notify({ type: "success", message: "兑换成功" });
        }
        this.tr = new Date().getTime();
      });
    },
    onClickLeft() {
      this.$router.back();
    },
    onSelect(action) {
      if (action.id == 1) {
        this.show = true;
      } else if (action.id == 0) {
        this.$router.push("/couponListRecord");
      }
    },
  },
};
</script>
<style  scoped>
</style>
<style>
</style>

